<template>
    <div class="page-container page-index">
        <div class="page-search-box">
            <!-- <div class="refresh-btn" @click="refresh">
                <div>刷新</div>
            </div> -->
            <div class="time-select">
                <div></div>
                <!-- <div class="export">导出</div> -->
                <div>
                    <el-date-picker
                        v-model="time"
                        type="daterange"
                        format="yyyy-MM-dd"
                        align="right"
                        placeholder="选择日期范围"
                        @change="refresh"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                </div>
            </div>
        </div>
        <div class="page-params">
            <div class="params-item" v-for="(item, index) in page_params" :key="index">
                <div class="icon">
                    <i :class="item.icon"></i>
                </div>
                <div class="params-item-num">{{item.num}}</div>
                <div class="params-item-name">{{item.name}}</div>
            </div>
        </div>
        <div class="page-echarts" :span="24">
            <div class="days-select">
                <div>
                    新增情况
                </div>
                <div>
                    <el-radio-group v-model="days" @change="daysChange">
                        <el-radio-button label="7">近7天</el-radio-button>
                        <el-radio-button label="15">近15天</el-radio-button>
                        <el-radio-button label="30">近30天</el-radio-button>
                    </el-radio-group>
                </div>
            </div>
            <div id="chartLine" style="width:100%; height:400px;"></div>
        </div>
    </div>
</template>
<script>
import echarts from 'echarts'
import { indexDataApi, newCountListApi } from '@/api/api.js';
import { str2date } from '@/utils/util.js';

export default {
    data () {
        return {
            days: 7,
            time:[],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 0);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近七天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
            page_params: [
                {
                    icon: 'fa fa-user-plus',
                    num: 'waiting...',
                    name: '今日新增用户',
                },
                {
                    icon: 'fa fa-line-chart',
                    num: 'waiting...',
                    name: '今日新增企业',
                },
                {
                    icon: 'fa fa-users',
                    num: 'waiting...',
                    name: '总用户数',
                },
                {
                    icon: 'fa fa-institution',
                    num: 'waiting...',
                    name: '总企业数',
                }
            ]
        }
    },
    created() {
        this.time = [str2date(new Date()), str2date(new Date())]
        this.GetIndexData();
        this.GetNewCountList();
    },
    mounted() {
    },
    methods: {
        // 获取首页数据
        GetIndexData() {
            let params = {
                startTime: str2date(this.time[0]),
                endTime: str2date(this.time[1])
            }
            indexDataApi(params).then(res => {
                this.page_params[0].num = res.data.newCustomerCount
                this.page_params[1].num = res.data.newCompanyCount
                this.page_params[2].num = res.data.allCustomerCount
                this.page_params[3].num = res.data.allCompanyCount
            })
        },
        // 点击刷新按钮
        refresh() {
            this.GetIndexData();
        },
        // 图表时间切换
        daysChange () {
            this.GetNewCountList();
        },
        // 获取首页图表数据然后渲染
        GetNewCountList() {
            let params = {
                days: this.days
            }
            newCountListApi(params).then(res => {
                console.log(res)
                let x_data = []
                let newCompanyData = []
                let newCustomerData = []
                res.data.newCompanyList.forEach(item => {
                    newCompanyData.push(item.data)
                    x_data.push(item.date.slice(2))
                })
                res.data.newCustomerList.forEach(item => {
                    newCustomerData.push(item.data)
                })
                this.drawLineChart(x_data, newCompanyData, newCustomerData);
            })
        },
        drawLineChart(x_data, newCompanyData, newCustomerData) {
            let chartLine = echarts.init(document.getElementById('chartLine'));
            var colors = ['#5793f3', '#d14a61', '#675bba'];


            const option = {
                color: colors,

                tooltip: {
                    trigger: 'none',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data: ['新增用户', '新增企业']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },

                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            onZero: false,
                            lineStyle: {
                                color: colors[1]
                            }
                        },
                        axisPointer: {
                            label: {
                                formatter: function (params) {
                                    return '新增企业  ' + params.value
                                        + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                                }
                            }
                        },
                        data: x_data
                    },
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            onZero: false,
                            lineStyle: {
                                color: colors[0]
                            }
                        },
                        axisPointer: {
                            label: {
                                formatter: function (params) {
                                    return '新增用户  ' + params.value
                                        + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                                }
                            }
                        },
                        data: x_data
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '新增用户',
                        type: 'line',
                        xAxisIndex: 1,
                        smooth: true,
                        data: newCustomerData
                    },
                    {
                        name: '新增企业',
                        type: 'line',
                        smooth: true,
                        data: newCompanyData
                    }
                ]
            };
            chartLine.setOption(option);

            // chartLine.setOption({
            //     tooltip: {
            //         trigger: 'axis'
            //     },
            //     legend: {
            //         data: ['新增用户', '新增企业']
            //     },
            //     grid: {
            //         left: '3%',
            //         right: '4%',
            //         bottom: '3%',
            //         containLabel: true
            //     },
            //     xAxis: {
            //         type: 'category',
            //         boundaryGap: false,
            //         data: x_data
            //     },
            //     yAxis: {
            //         type: 'value'
            //     },
            //     series: [
            //         {
            //             name: '新增用户',
            //             type: 'line',
            //             stack: '总量',
            //             data: newCustomerData,
            //             smooth: true
            //         },
            //         {
            //             name: '新增企业',
            //             type: 'line',
            //             stack: '总量',
            //             data: newCompanyData,
            //             smooth: true
            //         }
            //     ]
            // });
        }
    }
}
</script>
<style lang="scss">
.page-index{
    .page-search-box{
        background: #fff;
        margin-bottom: 20px;
        .refresh-btn{
            border-bottom: 1px solid #CED4DA;
            height: 60px;
            position: relative;
            div{
                z-index: 999;
                height: 32px;
                width: 68px;
                cursor: pointer;
                color: #fff;
                border-radius: 4px;
                text-align: center;
                line-height: 32px;
                background: #51CDCB;
                position: absolute;
                top: 19px;
                right: 19px;
            }
        }
        .time-select{
            height: 79px;
            box-sizing: border-box;
            padding: 20px 20px 0;
            display: flex;
            justify-content: space-between;
            .export{
                height: 32px;
                width: 68px;
                cursor: pointer;
                color: #fff;
                border-radius: 4px;
                text-align: center;
                line-height: 32px;
                background: #51CDCB;
            }
        }
    }
    .page-params{
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        .params-item{
            width: 24%;
            height: 114px;
            background: #fff;
            position: relative;
            box-sizing: border-box;
            padding-left: 90px;
            .icon{
                position: absolute;
                height: 36px;
                left: 30px;
                i{
                    font-size: 36px;
                    line-height: 114px;
                    &.fa-user-plus{
                        color:#24d2b5;
                    }
                    &.fa-line-chart{
                        color: #20AEE3;
                    }
                    &.fa-users{
                        color:#6772e5;
                    }
                    &.fa-institution{
                        color:#ff5c6c;
                    }
                }
            }
            .params-item-num{
                padding-top: 30px;
                height: 36px;
                line-height: 36px;
                font-weight: bold;
                font-size: 24px;
                color: #455a64;
            }
            .params-item-name{
                line-height: 16px;
                font-size: 14px;
                color: #bcc3d3;
            }
        }
    }
    .page-echarts{
        background: #fff;
        .days-select{
            display: flex;
            justify-content: space-between;
            padding: 30px;
        }
    }
}
</style>
